<template>
  <q-card style="width: 100%; max-width: 400px">
    <q-card-section>
      <div class="text-subtitle2">新增用户</div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      <q-form class="row">
        <div class="col-12">
          <q-item>
            <q-select
              square
              dense
              filled
              class="full-width"
              v-model="userForm.userType"
              :options="options"
              label="用户类型"
            />
          </q-item>
        </div>
        <div class="col-12">
          <q-item>
            <q-input
              dense
              square
              filled
              class="full-width"
              v-model="userForm.userName"
              label="姓名"
            />
          </q-item>
        </div>
      </q-form>
    </q-card-section>

    <q-card-actions align="right">
      <q-btn flat label="保存" color="primary" @click="saveUser" />
      <q-btn flat label="关闭" v-close-popup />
    </q-card-actions>
  </q-card>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useQuasar } from 'quasar';
const $q = useQuasar();
// 基于类型
const emit = defineEmits<{
  (e: 'close-drawer'): void;
}>();
const userForm = reactive({
  userName: '',
  userType: '',
});

const options = ['系统用户', '银行用户', '开发用户'];
const saveUser = () => {
  emit('close-drawer');
  $q.dialog({ message: JSON.stringify(userForm) });
};
</script>

<style scoped></style>
